import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,pageSize,getAvatar,memberTypeArr,subtime} from '../../utils/common'
import './index.less'
import right from "../../assets/img/right.png";
import none_people from "../../assets/img/none_people.png";

//我的团队
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Company extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  state = {
    memberTypeArr: memberTypeArr,
    currentNavId: 0,
    items:[],
    totalCount:0,
    pageIndex:1,
    pageSize,
    shareCount: {}
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'我的团队' })
    this.getSpreadUsers()
    this.getUserShareCount()
  }

  getUserShareCount(): void {
    let  { userStore } = this.props.stores
    userStore.getUserShareCount({
      callback: res => { this.setState({ shareCount: toJS(res) }) }
    })
  }

  getSpreadUsers() {
    let  { userStore } = this.props.stores
    let { currentNavId,pageIndex,pageSize } = this.state
    userStore.getSpreadUsers({
      formLevel:currentNavId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: toJS(res.totalCount), items: toJS(res.items)})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  changeCurrentNavId(id:number){
    this.setState({
      currentNavId:id,
      items: [],
    }, () => {
      this.getSpreadUsers()
    })
  }

  teamMember(item: object) {
    // 缓存信息给下个页面使用
    getRuntime().setStorage('fatherUser', item)
    getRuntime().navigateTo('/pages/user/team_member?id='+item.id)
  }

  render() {
    let { currentNavId, items,shareCount } = this.state
    return (
      <View>
        <View className='team-type'>
          <View className={currentNavId === 0 ? 'item item-active' : 'item'}
                onClick={this.changeCurrentNavId.bind(this, 0)} >
            <View className='name'>普通会员</View>
            <View className='count'>{shareCount.normalCount}</View>
          </View>
          <View className={currentNavId === 1 ? 'item item-active' : 'item'}
                onClick={this.changeCurrentNavId.bind(this, 1)}>
            <View className='name'>VIP会员</View>
            <View className='count'>{shareCount.vipCount}</View>
          </View>
          <View className={currentNavId === 2 ? 'item item-active' : 'item'}
                onClick={this.changeCurrentNavId.bind(this, 2)}>
            <View className='name'>代理商</View>
            <View className='count'>{shareCount.agentCount}</View>
          </View>
          <View className={currentNavId === 3 ? 'item item-active' : 'item'}
                onClick={this.changeCurrentNavId.bind(this, 3)}>
            <View className='name'>合伙人</View>
            <View className='count'>{shareCount.partnerCount}</View>
          </View>
        </View>
        {items.length>0&&
          <View className='my-my_team'>
            <View className='interval' />
            {
            items.map(item => {
                return (
                  <View className='list-18-item' onClick={this.teamMember.bind(this, item)}>
                    <Image src={getAvatar(item.avatar)} className='img'/>
                    <View className='r'>
                      <View className='line line1'>
                        <View className='list-title'><Text>{item.name}</Text>
                          {item.agencyLevel === 0 && <Text className='list-label list-label0'>普通会员</Text>}
                          {item.agencyLevel === 1 && <Text className='list-label list-label1'>VIP会员</Text>}
                          {item.agencyLevel === 2 && <Text className='list-label list-label2'>代理商</Text>}
                          {item.agencyLevel === 3 && <Text className='list-label list-label3'>合伙人</Text>}
                        </View>
                        <View className='list-info'>{subtime(item.creationTime)}</View>
                      </View>
                      <View className='line line2'>
                        <View className='list-title'>{item.shareCount}个成员</View>
                        <Image src={right} className='icon' />
                      </View>
                    </View>
                  </View>
                )
              })
            }
        </View>
        }
        {
          items.length<=0&&
          <View className='my-my_team_none'>

              <View className='none-info'>
                  <Image className='none-icon' src={none_people} />
                  <Text className='none-title list-desc'>暂时还没有团队成员哦~</Text>
                  <View className='btn-line-submit' onClick={this.handelRouter.bind(this, '/pages/user/qrcode')}>+邀请好友</View>
              </View>
          </View>
        }
      </View>
    )
  }
}

export default Company
